<template>
	<div class="container">
		<a-row :gutter="20" justify="end">
			<a-col :span="2" class="py-4 text-center">
				<a-space>
					<a-button @click="closeTab('/contract')">
						<close-outlined />关闭
					</a-button>
				</a-space>
			</a-col>
		</a-row>
		<a-descriptions title="主要物资合同详情" bordered :column="3" :label-style="{ width: '140px' }" :content-style="{ width: 'calc(33.333333333vw - 140px)' }">
			<a-descriptions-item label="项目名称">{{ formState.project?.name }}</a-descriptions-item>
			<a-descriptions-item label="选择计划名称">{{ formState.plan?.name }}</a-descriptions-item>
			<a-descriptions-item label="合同名称">{{ formState.name }}</a-descriptions-item>
			<a-descriptions-item label="合同编号">{{ formState.code }}</a-descriptions-item>
			<a-descriptions-item label="供应商">{{ formState.supplier?.company_name }}</a-descriptions-item>
			<a-descriptions-item label="客户联系人">{{ formState.contact }}</a-descriptions-item>
			<a-descriptions-item label="价格类型">{{ ['固定单价合同', '单价*浮动率合同', '单价*浮动价合同'][formState.price_type - 1] }}</a-descriptions-item>
			<a-descriptions-item label="物资类型">{{ ['其他', '混凝土专项', '钢筋专项'][formState.material_type - 1] }}</a-descriptions-item>
			<a-descriptions-item label="签订时间">{{ formState.sign_time }}</a-descriptions-item>
			<a-descriptions-item label="附件">
				<template v-for="(item, i) in formState.file_path" :key="i">
					<a :href="item.url" target="_blank" class="mr-8">
						<a-space>
							<file-pdf-outlined />
							{{ item.name }}
						</a-space>
					</a>
				</template>
			</a-descriptions-item>
			<a-descriptions-item label="采购方式">{{ formState.purchase_way?.name }}</a-descriptions-item>
			<a-descriptions-item label="付款方式">{{ formState.pay_way?.name }}</a-descriptions-item>
			<a-descriptions-item v-if="formState.material_type === 2" label="技术指标">
				<span v-for="(item, index) in formState.art_indexes" :key="index" class="mr-5">
					{{ artIndexesGongHaos.find(i => i.value === item.gonghao_id)?.label }}: &yen;{{ item.price }};
				</span>
			</a-descriptions-item>
		</a-descriptions>

		<a-table :scroll="tableScroll" :pagination="false" :data-source="formState._materials" :columns="columns" :row-key="(record) => record.key" :title="() => '合同物资清单'">
			<template #summary>
				<a-table-summary-row class="table-summary">
					<a-table-summary-cell>
						<a-typography-text>合计</a-typography-text>
					</a-table-summary-cell>

					<a-table-summary-cell :col-span="[6, 8, 8][formState.price_type - 1]"></a-table-summary-cell>

					<a-table-summary-cell>
						<a-typography-text>
							&yen;
							<b>{{ formState.amount }}</b>
						</a-typography-text>
					</a-table-summary-cell>
					<a-table-summary-cell></a-table-summary-cell>
					<a-table-summary-cell>
						<a-typography-text>
							&yen;
							<b>{{ formState.with_tax_amount }}</b>
						</a-typography-text>
					</a-table-summary-cell>
					<a-table-summary-cell>
						<a-typography-text>
							&yen;
							<b>{{ formState.tax_amount }}</b>
						</a-typography-text>
					</a-table-summary-cell>
					<a-table-summary-cell></a-table-summary-cell>
				</a-table-summary-row>
			</template>
		</a-table>

		<a-card class="workflow" title="审批流" size="small">
			<a-workflow v-if="formState.id" v-model:status="formState.workflow_status" module="contract" :target-id="formState.id" :project-id="formState.project_id" :code="formState.code" :user-id="formState.opr_id" :extra="true" :steps="true" @submit="(e) => console.log(e)"></a-workflow>
		</a-card>
		<a-row :gutter="20">
			<a-col :span="24" class="py-4 text-center">
				<a-space>
					<a-button @click="closeTab('/contract')">
						<close-outlined />关闭
					</a-button>
				</a-space>
			</a-col>
		</a-row>
	</div>
</template>
<script setup>
import { onMounted, ref, computed, inject } from "vue";
import * as math from "mathjs";
import { post } from "../utils";
import { CloseOutlined } from "@ant-design/icons-vue";

import { FilePdfOutlined } from "@ant-design/icons-vue";

import { AWorkflow } from "@/components/index.js";

import { useRoute } from "vue-router";
const {
	params: { id }
} = useRoute();

const tableScroll = computed(() => ({ x: document.documentElement.clientWidth - 680 }));

const formState = ref({});
const columns = ref([]);
const artIndexesGongHaos = ref([]);
post("dictionary", { root_id: 1069 }).then((data) => {
	artIndexesGongHaos.value = data.map(d => {
		return {
			value: d.id,
			label: d.name
		};
	});
});
onMounted(async () => {
	const data = await post("contract/info", { id });

	if (data.file_path) data.file_path = JSON.parse(data.file_path);

	data.with_tax_amount = math.format(math.add(data.amount, data.tax_amount), value => value.toFixed(2));
	if (data.art_indexes) {
		data.art_indexes = JSON.parse(data.art_indexes);
	}
	columns.value = [
		{
			title: "ID",
			dataIndex: "key",
			width: 100,
			align: "center",
			customRender: ({ text, record, index, column }) => {
				return index + 1;
			},
		},
		{
			title: "物资名称",
			dataIndex: ["material", "name"],
			width: 200,
			ellipsis: true
		},
		{
			title: "型号规格",
			dataIndex: ["material", "model"],
			width: 240,
			ellipsis: true
		},
		{
			title: "单位",
			dataIndex: "unit",
			width: 100,
			align: "center"
		},
		{
			title: "数量",
			dataIndex: "quantity",
			width: 100,
			align: "center"
		},
		{
			title: data.price_type === 1 ? "不含税单价(元)" : "不含税基准价格(元)",
			dataIndex: "without_tax_subprice_base",
			width: 150,
			align: "center"
		},
		{
			title: "税率%",
			dataIndex: "tax",
			width: 120,
			align: "center"
		},
	]
	if (data.price_type === 2) {
		columns.value.push({
			title: "浮动比率±(%)",
			dataIndex: "up_per",
			width: 120,
			align: "center"
		})
	} else if (data.price_type === 3) {
		columns.value.push({
			title: "浮动价格(±)",
			dataIndex: "up_per",
			width: 120,
			align: "center"
		})
	}
	columns.value = [
		...columns.value,
		...(data.price_type !== 1 ? [{
			title: "不含税单价(元)",
			dataIndex: "without_tax_subprice",
			width: 120,
			align: "center"
		}] : []),
		{
			title: "不含税总价(元)",
			dataIndex: "without_tax_amount",
			width: 120,
			align: "center"
		},
		{
			title: "含税单价(元)",
			dataIndex: "with_tax_subprice",
			width: 120,
			align: "center"
		},
		{
			title: "含税总价(元)",
			dataIndex: "with_tax_amount",
			width: 120,
			align: "center"
		},
		{
			title: "税额",
			dataIndex: "tax_amount",
			width: 120,
			align: "center"
		},
		{
			title: "备注",
			dataIndex: "memo",
			width: 200,
			align: "center",
			ellipsis: true
		},
	]
	formState.value = data;
});

const closeTab = inject("closeTab")
</script>

<style scoped lang="scss">
.container {
	background: #fff;
	padding: 12px;
}

:deep(.ant-table-title) {
	font-size: 16px;
	padding: 20px 0;
	text-align: center;
}

.table-summary {
	background: #fcfcfc;
	color: #333;
	font-size: 12px;
	text-align: center;
}

.workflow {
	margin-top: 32px;
}
</style>
